<!--
 * @Author: Shber
 * @Date: 2024-07-04 11:05:51
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-04 17:42:06
 * @Description: 
-->
<template>
  <view class="charts-box">
    <qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
  </view>
</template>
<script setup>
import {ref, reactive, watch} from 'vue'

const emits = defineEmits(['onSuccess'])
const props = defineProps({
  data: {
    type: Array,
    default: ()=>[]
  }
})

const dataInfo = ref([])
watch(() => props.data, (newVal) => {
  dataInfo.value = newVal
},{ immediate: true })

const chartData = ref({})
const opts = reactive({
      color: ["#2DAED6","#91CB74"],
      padding: [15,0,0,0],
      enableScroll: false,
      legend: {},
      xAxis: {
        disableGrid: true,
        boundaryGap: "justify",
      },
      yAxis: {
        gridType: "dash",
        dashLength: 2
      },
      extra: {
        area: {
          type: "straight",
          opacity: 0.1,
          addLine: true,
          width: 2,
          gradient: false,
          activeType: "hollow"
        }
      }
    })
 const getServerData = () => {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "成交量A",
                data: [0,18,25,7,4,20]
              }
            ]
          };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
    }
    getServerData()
</script>
<style scoped lang="scss">

</style>